<template>
  <div style="background: #fff; padding: 30px">
    <div class="fc">
      <div class="Title"><span class="cos">{{ state.tital }}站点活动列表</span> / {{ state.siteName }}</div>
      <div class="backBtn" @click="backRouterView">返回</div>
    </div>
    <div class="flewbtn">
      <el-select
        v-model="state.value"
        placeholder="展具类型"
        class="elSelect_a"
        size="large"
      >
        <el-option
          v-for="item in state.options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          :popper-append-to-body="false"
        />
      </el-select>
      <el-select
        v-model="state.valueTwo"
        placeholder="展具级别"
        class="elSelect_a"
        size="large"
      >
        <el-option
          v-for="item in state.optionsTwo"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button size="large" type="primary" @click="checkSitelist"
        >查询</el-button
      >
      <el-button size="large" @click="clearSiteItem">清除</el-button>
      <el-button size="large" @click="addSiteItem">增加</el-button>
    </div>
    <!-- 展示和编辑表格 -->
    <el-scrollbar style="margin-bottom: 20px" height="700px">
      <el-table
        :data="filterTableData"
        :header-cell-style="{
          'text-align': 'left',
          background: '#f2f3f5',
          height: '50px',
          color: '#000000',
          'font-size': '15px',
        }"
        :cell-style="{ 'text-align': 'left', height: '80px' }"
        style="width: 100%"
        ref="multipleTableRef"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column
          label=""
          header-align="left"
          prop="flowTitle"
          min-width="100"
        />
        <el-table-column align="right" width="65">
          <!-- <template #header>
                  <el-input v-model="search" size="small" placeholder="Type to search" />
                </template> -->
          <template #header>
            <div>操作</div>
          </template>
          <template #default="scope">
            <view
              style="color: #409eff; cursor: pointer"
              @click="checkListItem(scope.$index, scope.row)"
            >
              查看
            </view>
          </template>
        </el-table-column>
      </el-table>
    </el-scrollbar>
  </div>
</template>
  
  <script setup>
import { toRefs, reactive, computed, onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import router from "../router/index";
import { ArrowDown, Plus } from "@element-plus/icons-vue";
import http from "../libs/http";

const state = reactive({
  value: "",
  options: [
    {
      value: "展具物流到货",
      label: "展具物流到货",
    },
    {
      value: "卸货说明",
      label: "卸货说明",
    },
    {
      value: "立柱到位立正",
      label: "立柱到位立正",
    },
  ],
  valueTwo: "",
  optionsTwo: [
    {
      value: "B级",
      label: "B级",
    },
    {
      value: "C级",
      label: "C级",
    },
    {
      value: "E级",
      label: "E级",
    },
  ],
  mouldVal: "",
  mouldArr: [
    {
      value: "模板1",
      label: "模板1",
    },
    {
      value: "模板2",
      label: "模板2",
    },
    {
      value: "模板3",
      label: "模板3",
    },
  ],
  tableData: [],
  tital: "", //路线名称
  tid: "", //路线ID
  sid:"",  //站点ID
  siteName: ""  //站点名称
});

// 初始化获取工作流列表
// 数据初始化
onMounted(() => {
  const route = useRoute();
  // 拿到页面传过来的参数
  console.log(
    "route接受到的参数>>>>>>>>>>>>>>>>",
    Number(route.query.sid),
    '????????站点ID',
    Number(route.query.tid),
    ">>>>>>>>>>>>>>>",
    route.query.titleName
  );
  state.sid = Number(route.query.sid)
  state.tid = Number(route.query.tid)
  state.tital = route.query.titleName;
  state.siteName = route.query.siteName;
  getReportsLevel(Number(route.query.sid));
});

const getReportsLevel = async (sid_a) => {
  let param = {
    openid: localStorage.getItem("openid"),
    sid: sid_a,
  };
  const res = await http.$get("/apies/backend/getReportsLevel", param);
  if (res.code == 200) {
    console.log(">>>>>>>>>>>>>>请求拿到数据了", res.data);
    let newTableList = [];
    res.data.map((i) => {
      newTableList.push({
        flowTitle: i.name,
        table_level: i.table_level,
        type_status: i.type_status,
      });
    });
    state.tableData = newTableList;
  } else {
    console.log(">>>>数据列表获取失败！！！");
  }
};

// 显示图表逻辑
const search = ref("");
const filterTableData = computed(() =>
  state.tableData.filter(
    (data) =>
      !search.value ||
      data.name.toLowerCase().includes(search.value.toLowerCase())
  )
);

// 多选和单选的逻辑
const multipleTableRef = ref();
const multipleSelection = ref([]);
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
  console.log(val, ">>>>>>>>>>>所有选中项");
};

//查询列表项
const checkSitelist = () => {
  console.log(">>>>查询");
};
// 清除列表项
const clearSiteItem = () => {
  console.log(">>>>清除");
};
// 增加列表项
const addSiteItem = () => {
  console.log(">>>>增加");
  state.Lid = "";
  // state.showModel = true;
  // clearAllDate_a();
};

// 查看列表详情页
const checkListItem = (index, row) => {
  console.log(
    ">>>>>>>>>>>>>点击了查看列表啦啦啦啦啦啦啦",
    JSON.parse(JSON.stringify(row))
  );
  switch (row.flowTitle) {
    case "布展":
        router.push({path:"/site_c/setShowcase", query:{ sid: state.sid, tid: state.tid, level: row.table_level, status: row.type_status, titleName: state.tital, siteName: state.siteName, reportTitle: row.flowTitle}})
      break;
    case "看展":
         router.push({path:"/site_c/setlookcase", query:{ sid: state.sid, tid: state.tid, level: row.table_level, status: row.type_status, titleName: state.tital, siteName: state.siteName, reportTitle: row.flowTitle}})
      break;
    case "撤展":
         router.push({path:"/site_c/setOutcase", query:{ sid: state.sid, tid: state.tid, level: row.table_level, status: row.type_status, titleName: state.tital, siteName: state.siteName, reportTitle: row.flowTitle}})
      break;
    case "总结":
         router.push({path:"/site_c/setSummarize", query:{ sid: state.sid, tid: state.tid, level: row.table_level, status: row.type_status, titleName: state.tital, siteName: state.siteName, reportTitle: row.flowTitle}})
      break;
    case "展具":
         router.push({path:"/site_c/setDevice", query:{ sid: state.sid, tid: state.tid, level: row.table_level, status: 1, titleName: state.tital, siteName: state.siteName, reportTitle: row.flowTitle}})
      break;
    case "竞品":
         router.push({path:"/site_c/setCompent", query:{ sid: state.sid, tid: state.tid, level: row.table_level, status: 1, titleName: state.tital, siteName: state.siteName, reportTitle: row.flowTitle}})
      break;

    default:
      break;
  }
};

// 路由页面回退
const backRouterView = () => {
  router.go(-1)
}
</script>
  
  <style scoped>
.Title {
  /* font-weight: 600; */
  font-size: 20px;
  margin-bottom: 20px;
}

.flewbtn {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.elSelect_a {
  border-radius: 15px;
  width: 250px;
  margin-right: 15px;
}
::v-deep .elSelect_a .el-input__wrapper {
  background-color: #e8e8e8;
  border-color: #c0c4cc;
  box-sizing: border-box;
  box-shadow: none;
}

.elSelect {
  border-radius: 15px;
  width: 250px;
  /* height: 28px; */
  flex: 8;
}
::v-deep .elSelect .el-input__wrapper {
  background-color: #e8e8e8;
  border-color: #c0c4cc;
  box-sizing: border-box;
  box-shadow: none;
}

::v-deep .elSelect .el-input__wrapper:focus {
  background-color: #e8e8e8;
  border-color: #c0c4cc;
  box-sizing: border-box;
  box-shadow: none;
  color: #c0c4cc;
}

::v-deep .elSelect .el-input__inner {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  box-shadow: none;
  padding: 0;
}

/* 改变输入框样式 */
::v-deep .enterpriseName .el-input__inner {
  /* width:100%; */
  background-color: #e8e8e8;
  border-color: #c0c4cc;
  color: #000;
  padding: 10px;
  box-sizing: border-box;
  /* border-radius: 5px; */
  height: 25px;
  border-radius: 3px;
}

.enterpriseName ::v-deep .el-input__inner {
  border: none;
}

::v-deep .enterpriseName .el-input__wrapper {
  padding: 0;
}

/* 改变上传按钮样式 */
::v-deep.el-upload--picture-card,
::v-deep .el-upload-list__item {
  width: 100px;
  height: 100px;
  line-height: 110px;
  border: none;
  background: #fff;
}

/* 改变选择器样式 */
::v-deep .Selectbox .el-input__wrapper {
  /* width:100%; */
  background-color: #e8e8e8;
  border-color: #c0c4cc;
  color: #000;
  padding: 10px;
  box-sizing: border-box;
  /* border-radius: 5px; */
  height: 28px;
  width: 100% !important;
  flex: 8;
}
::v-deep .Selectbox .el-input__wrapper .el-input__inner {
  border: none;
}
/* 改变文本域样式 */
::v-deep .textTip .el-textarea__inner {
  background-color: #e8e8e8;
  border-color: #c0c4cc;
  color: #000;
  padding: 10px;
  box-sizing: border-box;
}

.block-col-2 .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

/* 隐藏横向滚动条 */
.el-scrollbar__bar {
  display: none !important;
}

#el-id-878-3 .el-dialog__body {
  padding: 0 !important;
}

/* 改变上传框框的大小 */
::v-deep .el-upload--picture-card {
  border: 1px dashed #e7e7e9;
}
::v-deep .el-upload--picture-card:hover {
  border-color: #e7e7e9;
  color: #e7e7e9;
}
::v-deep .el-upload--picture-card {
  width: 70px;
  height: 70px;
  font-size: 16px !important;
}
::v-deep .el-upload {
  width: 70px;
  height: 70px;
  line-height: 50px;
  font-size: 16px;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item {
  width: 70px;
  height: 70px;
  line-height: 50px;
  font-size: 16px;
}

::v-deep .el-upload-list--picture-card .el-upload-list__item-actions:hover {
  opacity: 1;
  font-size: 16px;
}

::v-deep .el-upload-list--picture-card .el-upload-list__item-thumbnail {
  width: 70px;
  height: 70px;
  line-height: 50px;
  font-size: 16px;
}
::v-deep .el-upload--picture-card .el-icon-plus {
  width: 28px;
  height: 28px !important;
  line-height: 1.7 !important;
}
::v-deep .avatar {
  width: 70px;
  height: 70px;
}

/* 确认按钮样式 */
.dialog-footer {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 40px;
}

/* 修改分页的背景颜色 */
::v-deep(
    .el-pagination.is-background .el-pager li:not(.is-disabled).is-active
  ) {
  background-color: #409eff !important;
}
.line_a {
  flex: 2;
  line-height: 22px;
  text-align: center;
  width: 78px;
  font-weight: 600;
}
.line_b {
  font-weight: 600;
  display: flex;
  justify-content: center;
  margin-top: 7px;
  margin-left: 5px;
  margin-right: 17px;
}
.line_c {
  margin: 20px 14px 23px 7px;
  font-weight: 600;
  width: 90px;
  text-align: end;
  display: flex;
}

/* ::v-deep .el-icon svg {
    height: 2em !important;
    width: 1em;
  } */
.line_g {
  flex: 2;
  line-height: 20px;
  text-align: center;
  font-weight: 600;
}
.line_f {
  flex: 8;
  background-color: #e8e8e8;
  padding-left: 6px;
  border-radius: 3px;
  box-sizing: border-box;
}
.image_a {
  width: 120px;
  height: 100px;
  border-radius: 10px;
  margin-top: 6px;
}
.cos {
  color: #D93442;;
}

.fc {
  display: flex !important;
  justify-content: space-between !important;
}
.backBtn {
  width: 55px !important;
  height: 35px !important;
  background: #F7F7F7 !important;
  border: 2px solid #E4E6EA !important;
  border-radius: 5px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-bottom: 20px !important;
  cursor: pointer !important;
}
</style>
  